<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        盒子模型的组成部分
        1. 内容区域（content）
          由内容区域组成，内容区域的宽度和高度由width和height属性指定。
        2. 内边距区域（padding）
        3. 边框区域（border）
        4. 外边距区域（margin）
    -->
    <style>
        .img {
            width: 300px;
            height: 200px;
            margin: 100px;
            border: 10px solid black;
            padding: 10px;
            /* content: "我是内容"; */
        }
    </style>
</head>

<body>
    <img class="img" src="image.png" alt="这是一张图片">
</body>

</html>